<template>
    <div style="width: 100%; height: auto">
        <!-- 基本信息 -->
        <div style="border: 0px solid #f00; margin-top: 0.5%; border-radius: 25px; background-color: #fff">
            <div style="width: 98%; margin-left: 1%">
                <el-divider></el-divider>
                <br />
                <el-form :model="form" status-icon label-width="130px" label-position="left" class="demo-ruleForm">
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="部门名称" prop="branchName">
                                <el-input v-model="form.branchName" placeholder="" style="width: 96%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="简称" prop="briefName">
                                <el-input v-model="form.briefName" placeholder="" style="width: 96%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="部门主管" prop="lordManageName">
                                <el-input v-model="form.lordManageName" placeholder="" style="width: 92%"></el-input>
                                <el-button type="text" style="color: #000" @click="open">点此选择</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="村属性" prop="hamletAttr">
                                <div class="input_css" style="width: 96%">
                                    &nbsp;
                                    <el-radio-group v-model="form.status">
                                        <el-radio label="1">是</el-radio>
                                        <el-radio label="0">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="排序" prop="serNumber">
                                <el-input v-model="form.serNumber" placeholder="" style="width: 96%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="form.phone" placeholder="" style="width: 96%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="传真" prop="fax">
                                <el-input v-model="form.fax" placeholder="" style="width: 96%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="row_Css">
                        <el-col :span="24">
                            <el-form-item label="地址" prop="address">
                                <el-input v-model="form.address" placeholder="" style="width: 96%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <br />
        <!-- 录入信息 -->

        <!-- 部门主管选择 -->
        <el-dialog title="选择部门名称" :visible.sync="dialog">
            <div>用户选择</div>
            <div style="height:400px;overflow: hidden;">
                <div class="left">
                    <el-tree
                        :data="data"
                        show-checkbox
                        node-key="id"
                        :props="defaultProps"
                    >
                    </el-tree>
                </div>
                <div class="center">
                    <el-button style="margin-left:6%;margin-top:60%" @click="left">移入<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    <el-button style="margin-top:60%" @click="right" icon="el-icon-arrow-left">移除</el-button>
                    <el-button style="margin-top:60%" @click="delect">清空</el-button>
                </div>
                <div class="right">
                </div>
            </div>
        </el-dialog>
        <!-- 部门主管选择 -->

        <!-- 按钮 -->
        <div style="text-align: center">
            <el-image :src="submit_img" style="width: 150px; height: 60px" @click="save"></el-image>
        </div>
    </div>
</template>
<script>
import system from '@/api/system_setting/dept_manager.js';
// import treeTransfer from 'el-tree-transfer'; // 引入

export default {
    props: {
        toData: {
            type: Array,
            require: true
        }
    },
    data() {
        return {
            // type:'',
            dialog: false,
            submit_img: require('../../assets/imgs/imgs/组 422.png'),
            delete_img: require('../../assets/imgs/imgs/组 423.png'),
            labelPosition: 'left',
            form: {},
            data: [],
            defaultProps: {
            children: 'dtos',
            label: 'proName'
            },
            rightdata:[]
        };
    },
    created() {
        this.init();
        
        // this.getlist()
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        // 添加
        save() {
            // debugger
            // let params = this.form;
            // this.form.userIds = '';
            // this.form.branchName = this.branchName;
            // this.form.father = $('#idfrom', window.parent.document).attr('data-pid');
            // params.type = this.type;
            // system.form(params).then((res) => {
            //     if (res.code == 2000) {
            //         this.$message.success('保存成功!');
            //     } else {
            //         if (res.message) {
            //             this.$message.error(res.message);
            //         } else {
            //             this.$message.error('保存时发生错误，请联系管理员');
            //         }
            //     }
            // });



            let params = this.form;
            this.form.userIds = '';
            // this.form.branchName = this.branchName;
            this.form.father = $('#idfrom', window.parent.document).attr('data-pid');
            params.type = this.type;
            this.$post('sysManage/branchManage/save', params).then((res) => {
                if(res.code == 2000){
                    this.$message.success('保存成功!');
                }else{
                    if(res.message){
                        this.$message.error(res.message);
                    }else{
                        this.$message.error('保存时发生错误，请联系管理员');
                    }                    
                }                
            });
        },
        init() {
            //判断路径有id值,做修改
            let can = $('#idfrom', window.parent.document).attr('data-id');
            if (can != 'undefined' && can != '') {
                //从路径获取id值
                var id = $('#idfrom', window.parent.document).attr('data-id');
                system.list(id).then((res) => {
                    console.log(res.data);
                    if (res.code == 2000) {
                        this.form = res.data;
                    } else {
                        if (res.message) {
                            this.$message.error(res.message);
                        } else {
                            this.$message.error('保存时发生错误，请联系管理员');
                        }
                    }
                });
                //调用根据id查询的方法
                 this.$post('sysManage/branchManage/getInfo/'+id).then((res) => {
                this.form = res.data;
            });
            } else {
                //路径没有id值，做添加
                //清空表单
                //this.ruleForm = {};
            }
        },
        // 获取用户树
        getuser() {
            // system.user().then((res) => {
            //     this.data = res.data;
                
            // });
             //调用根据id查询的方法
                 this.$post('/sysManage/branchManage/getUserTree').then((res) => {
                this.data = res.data;
            });
        },
        // 点击移入按钮
        left(){
            var treedata = this.getto(this.data,true);//获取左边状态为true的数据
            this.rightdata.push(...treedata);//将获取的数据push到右边去
            this.data = this.getto(this.data,false);//剔除左边状态为true的数据。
        },
        // 点击移除按钮
        right(){},
        // 点击删除按钮
        delect(){
            this.rightdata = []
        },
        open() {
            this.dialog = true;
            this.getuser();
        },
    }
};
</script>
<style scoped>
/* 输入框样式 */
.el-input--small .el-input__inner {
    background: #f0f0f0;
    border: 1px solid #2e8ccc;
}
.input_css {
    background: #f0f0f0;
    border: 1px solid #2e8ccc;
    border-radius: 4px;
}
.el-textarea__inner {
    background: #f0f0f0;
    border: 1px solid #2e8ccc;
    height: 70px !important;
}
.fontStyle {
    font-size: 20px;
    font-family: '微软雅黑';
    color: #2e8ccc;
    font-weight: 600;
}
.el-divider--horizontal {
    margin: 10px 0;
    background-color: #2e8ccc;
    height: 2px;
}
.row_Css {
    font-size: 18px;
    font-family: '微软雅黑';
    color: #000;
    font-weight: 600;
}
.left{
    float: left;
    width: 38%;
    height: 90%;
    margin-left: 1%;
    margin-right: 1%;
    border: 1px solid #000;
}
.center{
    float: left;
    width: 17%;
    text-align: center;
}
.right{
    float: left;
    width: 38%;
    height: 90%;
    margin-left: 1%;
    margin-right: 1%;
    border: 1px solid #000;
}
</style>
